<template>
  <div id="goods">
    <nav>
      <ul class="goods-nav">
        <li v-for="v in goodsNav" :key="v.id">
          <router-link :to="`/home/goods/${v.id}`" active-class="router-link-active">
            <div>{{ v.bigTitle }}</div>
            <div>{{ v.smallTitle }}</div>
          </router-link>
        </li>
      </ul>
    </nav>
    <router-view></router-view>
  </div>
</template>
<script>
export default {
  name: 'GoodList',
  components: {
  },
  props: ["goodsNav"],
  data() {
    return {

    }
  }
};
</script>
<style lang='less' scoped>
#goods {
  width: 37.5rem;
  height: 50rem;
  margin-top: 1rem;

  nav {
    .goods-nav {
      display: flex;
      justify-content: space-between;

      li {
        width: 6.5rem;

        div {
          &:first-child {
            font-size: 1.5rem;
            font-weight: bold;
            cursor: none;
            text-decoration: none;
          }

          &:last-child {
            width: 4rem;
            margin-left: 0.4rem;
            margin-top: 1rem;
            font-size: 1rem;
            color: gray;
            cursor: none;
            text-decoration: none;
          }
        }

        .router-link-active{
          color: rgb(58, 120, 220);
          text-decoration: none;
          div{
            text-decoration: none;
            cursor: none;
            &:last-child{
              background-color:  rgb(58, 120, 220);
              color: white;
            }
          }
        }
        
      }
    }
    margin-bottom: 1rem;
  }

}
</style>